<template>
  <view class="page">
    <view class="main padding-0">
      <view class="user-info">
        <view class="flex">
          <view>
            <up-avatar size="48" :src="state.userInfo.avatar
              ? IMAGE_URL + state.userInfo.avatar
              : '/static/images/icon-avatar-default.png'
              "></up-avatar>
          </view>
          <view class="flex-sub margin-left-sm">
            <view class="flex justify-start align-center">
              <text class="text-lg margin-right-xs"> {{ state.userInfo.nickName }} </text>
              <up-tag :text="state.userInfo.userIdentity == 2 ? '家长' : '老师'" size="mini" bgColor="#FFBBC2"
                color="#F64B5C" shape="circle" borderColor="transparent"></up-tag>
            </view>
            <up-text size="14" :text="`我的芽号：${state.userInfo.showId}`" color="#B7B7B7" margin="5px 0 0 0">
            </up-text>
          </view>
          <view @click="toPage('/pages/me/qrcode')">
            <image src="/static/images/icon-qrcode.svg" alt="" style="width: 46rpx" mode="widthFix" />
          </view>
        </view>
        <!-- 徽章 -->
        <view class="flex margin-top" style="width: 60%">
          <view class="flex-sub" v-for="i in 10">
            <image :src="`/static/images/badge/default_${i}.png`" style="width: 36rpx; height: 36rpx"></image>
          </view>
        </view>
        <!-- 签名 -->
        <view class="flex justify-between align-center margin-top-sm">
          <view class="flex-sub">
            <up-text size="28rpx" color="#3D511D" :text="state.userInfo.bio"></up-text>
          </view>
          <!-- <up-button
            shape="circle"
            color="#9CB95A"
            plain
            text="编辑个人信息"
            size="mini"
            customStyle="width:160rpx;height:52rpx !important;background:transparent;"
            @click="state.showEditBio = true"
          ></up-button> -->
          <up-button shape="circle" color="#9CB95A" plain text="编辑个人信息" size="mini"
            customStyle="width:160rpx;height:52rpx !important;background:transparent;"
            @click="toPage('/pages-sub/me/update')"></up-button>
        </view>
      </view>
      <view class="padding-lr">
        <!-- <view
          class="btn-daily"
          hover-class="click"
          hover-stay-time="100"
          @click="toPage(`/pages-sub/report/history?sid=${state.studentList[0].sId}`)"
        >
          日报回顾
        </view> -->
        <!-- <up-text
          text="我的徽章"
          size="28rpx"
          margin="24rpx 0 0 0"
        ></up-text>
        <view class="bg-white padding radius-lg margin-top">
          <up-text
            text="真知章"
            color="#20280F"
          ></up-text>
          <view class="flex align-center">
            <text class="text-muted text-sm">当前等级：</text>
            <text class="text-primary text-df">专业进阶者</text>
          </view>
          <up-grid :border="false">
            <up-grid-item
              v-for="i in 5"
              :key="i"
            >
              <up-icon
                :customStyle="{ paddingTop: 20 + 'rpx' }"
                name="photo"
                :size="22"
              ></up-icon>
            </up-grid-item>
          </up-grid>
        </view> -->
        <up-text text="当前关联的学生" size="28rpx" margin="24rpx 0 0 0" v-if="state.studentList.length"></up-text>
        <view>
          <view v-for="(item, index) in state.studentList" :key="index"
            class="bg-white radius-lg padding-sm margin-top-sm flex align-center justify-between">
            <view>

              <up-avatar size="40"
                :src="item.sex === 1
                  ? `${IMAGE_URL}/profile/content/2025/04/28/kMTk1KgLHBdoc948cab5bf14490df9d142be00d82eb2_20250428141815A002.png`
                  : `${IMAGE_URL}/profile/content/2025/04/28/n6eVNhK19FSQ0889c47942285ae807a2959e9c7c92e1_20250428141907A004.png`"></up-avatar>
              <!-- <up-avatar size="40" :src="item.avatar
                ? item.avatar
                : 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg'
                "></up-avatar> -->
            </view>
            <view class="flex-sub margin-left-xs">
              <up-text :text="item.nickname" size="28rpx"></up-text>
              <up-text :text="item.showId" size="24rpx" color="#666666"></up-text>
            </view>
            <view>
              <!-- <up-text
                text="上海杨浦小学"
                size="24rpx"
                color="#B7D07E"
              ></up-text>
              <up-text
                text="三年级四班"
                size="24rpx"
                color="#B7B7B7"
                align="right"
              ></up-text> -->
              <up-button text="查看日报1" size="mini" type="primary"
                customStyle="width:140rpx !important;height:52rpx !important;"
                @click="toPage('/pages-sub/report/history?sid=' + item.sId)"></up-button>
            </view>
          </view>
          <view class="margin-tb-sm">
            <up-button text="添加关联小朋友" shape="circle" size="mini" type="primary"
              @click="toPage('/pages/me/addLink')"></up-button>
          </view>
        </view>
      </view>
      <!-- 编辑签名 -->
      <up-modal confirmColor="#6D9319" :show="state.showEditBio" @confirm="editBio">
        <up-textarea v-model="state.newBio" placeholder="请输入内容" count></up-textarea>
      </up-modal>
    </view>
  </view>
</template>

<script setup>
import { getUserInfoApi, updateBIOApi, studentListApi } from '@/api/me';
import { onMounted, reactive } from 'vue';
import { IMAGE_URL } from '@/utils/env';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { setUserInfo } from '../../utils/auth';
const state = reactive({
  userInfo: {},
  showEditBio: false,
  newBio: '', //新个性签名
  studentList: [] //学生列表
});
onLoad(() => {
  getUserInfo();
  getStudentList();
});
onShow(() => {
  getUserInfo();
  // getStudentList();
})
// 获取用户信息
const getUserInfo = async () => {
  const result = await getUserInfoApi();
  if (result.code === 200) {
    state.userInfo = result.data;
    // setUserInfo('userInfo', state.userInfo);
  }
};
// 编辑个性签名
const editBio = async () => {
  const params = {
    bio: state.newBio
  };
  const result = await updateBIOApi(params);
  if (result.code === 200) {
    state.showEditBio = false;
    getUserInfo();
  } else {
    uni.$u.toast(result.msg);
    state.showEditBio = false;
  }
};

const getStudentList = async () => {
  const result = await studentListApi();
  if (result.code === 200) {
    state.studentList = result.data;
  }
};
const toPage = (url) => {
  uni.navigateTo({
    url
  });
};
</script>

<style lang="scss" scoped>
.page {
  background: #f3f3f3;
}

.user-info {
  // #ifdef MP-WEIXIN
  padding: 180rpx 60rpx 34rpx 60rpx;
  // #endif
  // #ifdef APP-PLUS
  padding: 90rpx 60rpx 34rpx 60rpx;
  // #endif
  background: linear-gradient(96.96deg,
      rgba(212, 233, 162, 0.4) 0%,
      rgba(184, 211, 122, 0.32) 18.41%,
      rgba(210, 233, 158, 0.36) 42.07%,
      rgba(201, 236, 124, 0.36) 67.49%,
      rgba(233, 255, 184, 0.4) 85.9%);
}

.btn-daily {
  color: #3d511d;
  font-size: 36rpx;
  font-weight: 400;
  text-align: center;
  margin: 24rpx 20rpx 0;
  padding: 20rpx;
  border-radius: 60rpx;
  font-family: 'Yuanti';

  border-width: 1px;
  border-style: solid;
  border-color: #d4e9a2; //linear-gradient(to right, #d4e9a2 90%, #e9ffb8) 1 stretch;;
  background: #f0efeb;

  &:active {
    background: rgb(212, 233, 162, 0.5);
  }
}
</style>
